<%--
  Created by IntelliJ IDEA.
  User: virus
  Date: 2019/9/4
  Time: 14:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        function query(deviceId){

            $.ajax({
                "url":"${pageContext.request.contextPath}/queryRepair",
                "type":"post",
                "data":{"deviceId":deviceId},
                "dataType":"json",
                "success":function(result){
                    $(".show").remove();
                    $(result).each(function(){
                        var str="<p class='show'>"+this.repairTime+","+this.repairRecord+"</p>";
                        $(".record").append(str);
                    })
                }
            })
        }


        $(function(){
            var deviceId=$(".deviceId").text();
            query(deviceId);
            $(".sub").click(function(){
                var record=$("textarea").val();
                if(record.length==0){
                    alert("维修记录不能为空")
                }else{
                    $.ajax({
                        "url":"/insert",
                        "type":"post",
                        "data":{"repairRecord":record,"deviceId":deviceId},
                        "dataType":"text",
                        "success":function(result){
                            if(result=="true"){
                                query(deviceId);
                                $("textarea").val("")
                            }else{
                                alert("维修记录添加失败");
                            }
                        }
                    })
                }
            })
        })
    </script>
    <style type="text/css">
        #bd {
            width: 600px;
            border: red 1px solid;
            margin: 30px auto 0px;
        }
        #devices{
            width: 100%;
        }
        #devices caption{
            height: 60px;
            font-size: 30px;
            padding-top: 15px;
            background-color: #23B14D;
        }
        #devices tr{
            height: 40px;
        }

        #repairs {
            width: 100%;
            margin: 20px 0px 0px 10px;
        }
        #repairs div:nth-of-type(1) p:nth-of-type(1){
            font-weight: bolder;
        }
        #repairs div:nth-of-type(2){
            margin-top: 10px;
        }
        #repairs div:nth-of-type(2) p:nth-of-type(1){
            font-weight: bolder;
        }
        .sub {
           margin-left: 35%;
        }
        .back {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div id="bd">
        <div>
            <table border="all" id="devices">
                <caption>设备详细信息</caption>
                <tr>
                    <td>设备编号</td>
                    <td class="deviceId">${device.id}</td>
                    <td>购买时间</td>
                    <td><fm:formatDate value="${device.purchaseTime}" pattern="yyyy-MM-dd"/> </td>
                </tr>
                <tr>
                    <td>设备名称</td>
                    <td>${device.deviceName}</td>
                    <td>设备状态</td>
                    <td>
                        <c:if test="${device.usage==0}">正常</c:if>
                        <c:if test="${device.usage==1}">不正常</c:if>
                    </td>
                </tr>
                <tr>
                    <td>设备型号</td>
                    <td>${device.deviceModel}</td>
                    <td>设备价值</td>
                    <td>${device.devicePrice}</td>
                </tr>
                <tr>
                    <td>资产编码</td>
                    <td>${device.assetCode}</td>
                    <td>报修期</td>
                    <td>${device.period}年</td>
                </tr>
            </table>
        </div>

        <div id="repairs">
            <div class="record">
                <p>维修记录:</p>
            </div>
            <div>
                <p>添加维护记录:</p>
                <p><textarea rows="5" cols="80"></textarea></p>
                <p><button class="sub">提交</button><a href="/index.jsp"><button class="back">返回</button></a></p>
            </div>
        </div>
    </div>
</body>
</html>
